<template>
      <div class="app-body">
            <el-col :span="24" class="info-box">
                  <header>
                        <div style="padding-right:50px;">欢迎使用{{ $setting.systemTitle }}</div>
                  </header>

                  <el-carousel indicator-position="outside">
                        <el-carousel-item v-for="item in noticeList" :key="item.id">
                            <el-image style="width: 100%; height: 100%" src="https://picsum.photos/1600/600?random=1" fit="cover"></el-image>
                            <h3 style="color:#fff;font-size: 28px;" @click="toNotice(item)">{{ item.title }}</h3>
                        </el-carousel-item>
                  </el-carousel>
            </el-col>
      </div>
</template>
<script>
export default {
      props: [],
      data() {
            return {
                noticeList:[]
            };
      },
      methods: {
        toNotice(row){
            this.$router.push('/notice/showNotice?id='+row.id)
        },
            /**格式化日期 */
            formatDate(row) {
                  let date = new Date(row.createTime);
                  let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                  let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                  // let hours=date.getHours()<10?'0'+date.getHours():date.getHours();
                  // let minutes=date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes();
                  return date.getFullYear() + "-" + month + "-" + day;
            },
            /**初始化公告 */
            initNotice() {
                  this.$axios.get(this.$url + "/admin/notice/top").then((res) => {
                        this.noticeList = res.data.data.list;
                  });
            },
            init() {
                  this.initNotice();
            },
      },
      mounted() {
            this.init();
      },
      // 监听
      watch: {
            $route() {
                  this.initClassify();
            },
      },
};
</script>
<style lang="less" scoped>
.el-carousel__container{
      height: 600px;
      position: relative;
      h3{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 70px;
            background-color: rgba(0, 0, 0, 0.641);
            color: white;
            text-align: center;
            line-height: 70px;
      }
}
.el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      margin: 0;
      text-align: center;
}

.el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
}

.app-body {
      font-family: Arial, sans-serif;
      background-color: #f0f8ff;
      margin: 0;
      padding: 0;
}
header {
      background-color: #50c878;
      padding: 20px;
      text-align: center;
      font-size: 30px;
      color: white;
}

.active-item {
      color: #000;
}

.search-container {
      display: flex;
      justify-content: center;
      padding: 20px;
}

.search-box {
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
      width: 60%;
}

.btn {
      background-color: #4caf50;
      border: none;
      color: white;
      text-align: center;
      display: inline-block;
      font-size: 14px;
      margin: 4px 2px;
      cursor: pointer;
      border-radius: 5px;
      padding: 10px 24px;
}

.post-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 20px;
}

.post {
      position: relative;

      background-color: white;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 20px;
      width: 80%;
      margin-bottom: 20px;
}

.post-title {
      cursor: pointer;
      font-size: 18px;
      font-weight: bold;
}

.post-info {
      font-size: 14px;
      color: #888;
}

.item-del {
      position: absolute;
      right: -10px;
      top: -10px;
      display: none;
      z-index: 99999;
}

.item-edit {
      position: absolute;
      right: 20px;
      top: -10px;
      display: none;
      z-index: 99999;
}
.post:hover .item-del {
      display: inline-block;
}
.post:hover .item-edit {
      display: inline-block;
}
</style>
